<div id="mainplace">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="ntModalLabel2">仓库位置设置</h4>
    </div>
    <div class="modal-body">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="alert alert-dismissable alert-info">
                    <button type="button" class="close">×</button>
                    <p></p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <table class="table table-hover ntTable">
                    <tbody>
                    <tr>
                        <td>仓库<span class="required"></span></td>
                        <td colspan="2">
                            <span>{{warehouse_name}}</span>
                        </td>
                    </tr>
                    <tr>
                        <td>位置名称<span class="required"></span></td>
                        <td>
                            <input type="text" value="" class="form-control" v-model="name">
                        </td>
                        <td align="right">
                            <button class="btn btn-primary" @click="addfunc()"><span
                                    class="glyphicon glyphicon-plus"></span> 添加
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <td>说明</td>
                        <td colspan="2">
                            <input type="text" value="" class="form-control" v-model="remarks">
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <table class="table table-hover ntTable">
                    <thead>
                    <tr>
                        <th>位置</th>
                        <th>说明</th>
                        <th>编辑</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(item,index) in placelist" v-if="placelist.length>0">
                        <td>{{item.name}}</td>
                        <td>{{item.remarks}}</td>
                        <td>{{item.mangname}} <br> {{item.update_date}}</td>
                        <td class="text-right">
                            <button class="btn btn-sm btn-primary" @click="editfun(index)">
                                <span class="glyphicon glyphicon-pencil"></span>编辑
                            </button>
                            <button class="btn btn-sm btn-default" @click="delitem(index)">
                                <span class="glyphicon glyphicon-trash"></span>删除
                            </button>
                        </td>
                    </tr>
                    <tr style="text-align: center;" v-if="placelist.length==0">
                        <td colspan="4" class="no_date">{:lang('no_data')}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal"><span
                class="glyphicon glyphicon-remove"></span>取消
        </button>
        <button type="button" class="btn btn-primary" :disabled="isdisadble" @click="subfun" style="padding-left:24px;padding-right:24px">
            <span class="glyphicon glyphicon-floppy-disk"></span>保存
        </button>
    </div>
    <input type="hidden" name="id" id="id" value="{$id|default=''}">
</div>

<script>
    new Vue({
        el: '#mainplace',
        data: () => ({
            isdisadble: false,
            warehouse_name: '',
            name: '',
            remarks: '',
            placelist: [],
            isplaceedit: 'a'
        }),
        methods: {
            //保存数据
            subfun(){
                this.isdisadble=true;
                $.ajax({
                    url: '/admin/warehouses/setingplace',
                    data: {
                        warehouse_id: $('#id').val(),
                        setingsub: '',
                        placelist: this.placelist
                    },
                    type: 'post',
                    dataType: 'json',
                    success: (data) => {
                        if (data.status != 1) {
                            change_mes_type('.modal-body .alert', data.status)
                            $('.modal-body .alert').show()
                            $('.modal-body .alert p').html('*' + data.msg + '<br>')
                        } else {
                            change_mes_type('#headeralert', data.status)
                            $('#headeralert').show()
                            $('#headeralert p').html('*' + data.msg + '<br>')
                            $('#place_editModal').modal('hide');
                        }
                        this.isdisadble=false;
                    }
                })
            },
            //进入的数据
            getalldata(){
                $('.loding').show();
                $.ajax({
                    url: '/admin/warehouses/setingplace?id=' + $('#id').val() + "&setingplace",
                    type: 'post',
                    dataType: 'json',
                    success: (data) => {
                        this.placelist = data.resdata;
                        this.warehouse_name = data.name
                        $('.loding').hide();
                    }
                })
            },
            //删除
            delitem(index){
                this.placelist.splice(index, 1)
                this.isplaceedit = 'a'
            },
            //编辑
            editfun(index){
                this.name = this.placelist[index].name
                this.remarks = this.placelist[index].remarks
                this.isplaceedit = index;
            },
            //添加
            addfunc(){
                //请求接口
                $.ajax({
                    url: '/admin/warehouses/setingplace',
                    data: {
                        addplace: '',
                        name: this.name,
                    },
                    type: 'post',
                    dataType: 'json',
                    success: (data) => {
                        if (data.status != 1) {
                            change_mes_type('.modal-body .alert', data.status)
                            $('.modal-body .alert').show()
                            $('.modal-body .alert p').html('*' + data.msg + '<br>')
                        } else {
                            if (this.isplaceedit >= 0 && this.isplaceedit != 'a') {
                                //编辑时的添加
                                this.placelist[this.isplaceedit]['name'] = this.name;
                                this.placelist[this.isplaceedit]['remarks'] = this.remarks;
                                this.placelist[this.isplaceedit]['update_at'] = data.resdata.update_at;
                                this.placelist[this.isplaceedit]['update_date'] = data.resdata.update_date;
                                this.placelist[this.isplaceedit]['update_id'] = data.resdata.update_id;
                            } else {
                                this.placelist.push({
                                    id: '',
                                    create_at: data.resdata.create_at,
                                    create_id: data.resdata.create_id,
                                    mangname: data.resdata.mangname,
                                    name: this.name,
                                    remarks: this.remarks,
                                    update_at: data.resdata.update_at,
                                    update_date: data.resdata.update_date,
                                    update_id: data.resdata.update_id,
                                    warehouse_id: $('#id').val()
                                })
                            }
                            change_mes_type('.modal-body .alert', data.status)
                            $('.modal-body .alert').show()
                            $('.modal-body .alert p').html('*添加成功' + '<br>')
                            this.name = '';
                            this.remarks = '';
                            this.isplaceedit = 'a'
                        }
                    }
                })
            }
        },
        created() {
            this.getalldata()
        }
    })
</script>